<template>
  <a-layout class="bgc-white page-box-employer-setting">
    <a-row class="p24 btmline" style="border: none">
      <a-col :span="2">
        <a-icon type="left" class="fs20" @click="goback" />
      </a-col>
      <div class="left2" style="cursor: pointer; margin-top: -3px" @click="goback">返回</div>
    </a-row>
    <a-collapse v-model="activeKey" class="p24" :bordered="false">
      <a-collapse-panel key="7" header="员工基本资料">
        <a-row>
          <div class="table-header">
            <div class="table-header-row1">
              <p>字段名称</p>
              <p>是否必填</p>
              <p>是否开启</p>
            </div>
            <div class="table-header-row1">
              <p>字段名称</p>
              <p>是否必填</p>
              <p>是否开启</p>
            </div>
          </div>
          <a-col v-for="(item, index) in allData.companyEmpNecessaryAttachmentVOList" :key="index" :span="12">
            <div class="table-header-row">
              <p>
                <span class="name-box">{{ item.fieldName }}</span>
              </p>
              <p>
                <a-checkbox v-model="item.isNecessary" @change="remoteControl(item, 'isNecessary')" />
              </p>
              <p>
                <a-checkbox v-model="item.isOpen" @change="remoteControl(item, 'isOpen')" />
              </p>
            </div>
          </a-col>
          <a-col v-for="(item, index) in allData.companyAdditionalFieldsAttachmentVOList" :key="index.id" :span="12">
            <div class="table-header-row2">
              <p class="name-box">
                <span>{{ item.fieldName }}</span>
              </p>
              <p>
                <a-checkbox v-model="item.isNecessary" class="checkbox1" @change="remoteControlAdd(item, 'isNecessary')" />
              </p>
              <div class="checkbox2">
                <a-checkbox v-model="item.isOpen" @change="remoteControlAdd(item, 'isOpen')" />
                <div class="item-delete">
                  <div>
                    <a-button class="add-field" @click="edit(item, 'annex')">
                      <a-icon type="form" class="editInformation" />
                    </a-button>
                  </div>
                  <a-popconfirm title="确定删除吗？" @confirm="confirmDelete(item.id)">
                    <a-icon slot="icon" type="question-circle-o" style="color: red" />
                    <a href="#">
                      <a-icon type="delete" class="add-delete" />
                    </a>
                  </a-popconfirm>
                </div>
              </div>
            </div>
          </a-col>
          <div>
            <a-button
              class="add-field-add"
              @click="
                showModal('visible1');
                resetForm();
              "
            >
              <a-icon type="plus-circle" class="add-field-icon" />添加字段
            </a-button>
            <a-modal v-model="visible1" title="添加新字段" @ok="handleAddOk(item, 'annex')">
              <a-form-model ref="form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-model-item
                  label="字段名称"
                  :rules="{
                    required: true
                  }"
                  help="1-8个字符，不能与现有字段重复"
                >
                  <a-input v-model="form.fieldName" placeholder="请输入字段名称" :max-length="8" />
                </a-form-model-item>
                <a-form-model-item ref="description" prop="description" label="字段描述">
                  <a-input v-model="form.description" placeholder="请输入字段描述" />
                </a-form-model-item>

                <a-form-model v-if="show === 0" ref="dynamicValidateForm" :model="dynamicValidateForm" v-bind="formItemLayoutWithOutLabel">
                  <a-form-model-item v-bind="formItemLayoutWithOutLabel" />
                </a-form-model>
              </a-form-model>
            </a-modal>
          </div>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="98" header="员工档案资料">
        <a-row>
          <div class="table-header">
            <div class="table-header-row1">
              <p>字段名称</p>
              <p>是否必填</p>
              <p>是否开启</p>
            </div>
            <div class="table-header-row1">
              <p>字段名称</p>
              <p>是否必填</p>
              <p>是否开启</p>
            </div>
          </div>
          <a-col v-for="(item, index) in allData.companyEmpNecessaryArchiveVOList" :key="index" :span="12">
            <div class="table-header-row">
              <p>
                <span class="name-box">{{ item.fieldName }}</span>
              </p>
              <p>
                <a-checkbox v-model="item.isNecessary" @change="remoteControl(item, 'isNecessary')" />
              </p>
              <p>
                <a-checkbox v-model="item.isOpen" @change="remoteControl(item, 'isOpen')" />
              </p>
            </div>
          </a-col>
          <a-col v-for="(item, index) in allData.companyAdditionalFieldsArchiveVOList" :key="index.id" :span="12">
            <div class="table-header-row2">
              <p class="name-box">
                <span>{{ item.fieldName }}</span>
              </p>
              <p>
                <a-checkbox v-model="item.isNecessary" class="checkbox1" @change="remoteControlAdd(item, 'isNecessary')" />
              </p>
              <div class="checkbox2">
                <a-checkbox v-model="item.isOpen" @change="remoteControlAdd(item, 'isOpen')" />
                <div class="item-delete">
                  <div>
                    <a-button class="add-field" @click="edit(item, 'archive')">
                      <a-icon type="form" class="editInformation" />
                    </a-button>
                  </div>
                  <a-popconfirm title="确定删除吗？" @confirm="confirmDelete(item.id)">
                    <a-icon slot="icon" type="question-circle-o" style="color: red" />
                    <a href="#">
                      <a-icon type="delete" class="add-delete" />
                    </a>
                  </a-popconfirm>
                </div>
              </div>
            </div>
          </a-col>
          <div>
            <a-button class="add-field-add" @click="showModal('visible2')">
              <a-icon type="plus-circle" class="add-field-icon" />添加字段
            </a-button>
            <a-modal v-model="visible2" title="添加新字段" @ok="handleAddOk(item, 'archive')">
              <a-form-model ref="form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-model-item
                  label="字段名称"
                  :rules="{
                    required: true
                  }"
                  help="1-8个字符，不能与现有字段重复"
                >
                  <a-input v-model="form.fieldName" placeholder="请输入字段名称" :max-length="8" />
                </a-form-model-item>
                <a-form-model-item ref="description" prop="description" label="字段描述">
                  <a-input v-model="form.description" placeholder="请输入字段描述" />
                </a-form-model-item>

                <a-form-model v-if="show === 0" ref="dynamicValidateForm" :model="dynamicValidateForm" v-bind="formItemLayoutWithOutLabel">
                  <a-form-model-item v-bind="formItemLayoutWithOutLabel" />
                </a-form-model>
              </a-form-model>
            </a-modal>
          </div>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="66" header="员工离职资料">
        <a-row>
          <div class="table-header">
            <div class="table-header-row1">
              <p>字段名称</p>
              <p>是否必填</p>
              <p>是否开启</p>
            </div>
            <div class="table-header-row1">
              <p>字段名称</p>
              <p>是否必填</p>
              <p>是否开启</p>
            </div>
          </div>
          <a-col v-for="(item, index) in allData.companyEmpNecessaryLeaveOfficeVOList" :key="index" :span="12">
            <div class="table-header-row">
              <p>
                <span class="name-box">{{ item.fieldName }}</span>
              </p>
              <p>
                <a-checkbox v-model="item.isNecessary" @change="remoteControl(item, 'isNecessary')" />
              </p>
              <p>
                <a-checkbox v-model="item.isOpen" @change="remoteControl(item, 'isOpen')" />
              </p>
            </div>
          </a-col>
          <a-col v-for="(item, index) in allData.companyAdditionalFieldsLeaveOfficeVOList" :key="index.id" :span="12">
            <div class="table-header-row2">
              <p class="name-box">
                <span>{{ item.fieldName }}</span>
              </p>
              <p>
                <a-checkbox v-model="item.isNecessary" class="checkbox1" @change="remoteControlAdd(item, 'isNecessary')" />
              </p>
              <div class="checkbox2">
                <a-checkbox v-model="item.isOpen" @change="remoteControlAdd(item, 'isOpen')" />
                <div class="item-delete">
                  <div>
                    <a-button class="add-field" @click="edit(item, 'leaveOffice')">
                      <a-icon type="form" class="editInformation" />
                    </a-button>
                  </div>
                  <!--  -->
                  <a-popconfirm title="确定删除吗？" @confirm="confirmDelete(item.id)">
                    <a-icon slot="icon" type="question-circle-o" style="color: red" />
                    <a href="#">
                      <a-icon type="delete" class="add-delete" />
                    </a>
                  </a-popconfirm>
                </div>
              </div>
            </div>
          </a-col>
          <div>
            <a-button class="add-field-add" @click="showModal('visible3')">
              <a-icon type="plus-circle" class="add-field-icon" />添加字段
            </a-button>
            <a-modal v-model="visible3" title="添加新字段" @ok="handleAddOk(item, 'leaveOffice')">
              <a-form-model ref="form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-model-item
                  label="字段名称"
                  :rules="{
                    required: true
                  }"
                  help="1-8个字符，不能与现有字段重复"
                >
                  <a-input v-model="form.fieldName" placeholder="请输入字段名称" :max-length="8" />
                </a-form-model-item>
                <a-form-model-item ref="description" prop="description" label="字段描述">
                  <a-input v-model="form.description" placeholder="请输入字段描述" />
                </a-form-model-item>

                <a-form-model v-if="show === 0" ref="dynamicValidateForm" :model="dynamicValidateForm" v-bind="formItemLayoutWithOutLabel">
                  <a-form-model-item v-bind="formItemLayoutWithOutLabel" />
                </a-form-model>
              </a-form-model>
            </a-modal>
          </div>
        </a-row>
      </a-collapse-panel>
    </a-collapse>
    <a-modal v-model="editvisible" title="编辑字段" @ok="handleEditOk(code)">
      <a-form-model ref="form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item
          label="字段名称"
          :rules="{
            required: true
          }"
          help="1-8个字符，不能与现有字段重复"
        >
          <a-input v-model="form.fieldName" placeholder="请输入字段名称" :max-length="8" />
        </a-form-model-item>
        <a-form-model-item ref="description" prop="description" label="字段描述">
          <a-input v-model="form.description" placeholder="请输入字段描述" />
        </a-form-model-item>

        <a-form-model v-if="show === 0" ref="dynamicValidateForm" :model="dynamicValidateForm" v-bind="formItemLayoutWithOutLabel">
          <a-form-model-item v-bind="formItemLayoutWithOutLabel" />
        </a-form-model>
      </a-form-model>
    </a-modal>
  </a-layout>
</template>

<script>
import {
  getNecessaryFields,
  postNecessaryFieldBatchDTO,
  postAdditionalFieldsAddDTO,
  deleteAdditionalFieldsQuery,
  putAdditionalFieldsUpdateDTO,
  putAdditionalFieldsOpen,
  putAdditionalFieldsNecessary
} from "@/api/staff/entry";
import Vue from "vue";
import { FormModel } from "ant-design-vue";
Vue.use(FormModel);
Vue.directive("selection", {
  inserted(el, binding) {}
});

export default {
  data() {
    return {
      code: "",
      currentItem: {},
      fieldType: ["选项", "文本", "文件", "图片"],
      status: 0,
      allData: {},
      allNewData: {},
      show: 0,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 20, offset: 4 }
        }
      },
      dynamicValidateForm: {
        domains: []
      },

      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      form: {},
      visible1: false,
      visible2: false,
      visible3: false,
      editvisible: false,
      activeKey: ["1", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16"],
      companyId: "",
      text: 1,
      res: {},
      result: {}
    };
  },

  created() {
    this.companyId = this.$store.state.hr.companyId;
    this.getData();
  },
  methods: {
    confirmDelete(id) {
      this.$confirm({
        title: "删除确认",
        content: "将删除全部用工单位的花名册及模板中的本字段",
        onOk: () => {
          deleteAdditionalFieldsQuery(id)
            .then(() => {
              this.getData();
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
    remoteControl(item, tag) {
      if (item.isNecessary && tag === "isNecessary") {
        item.isOpen = true;
      } else if (!item.isOpen && tag === "isOpen") {
        item.isNecessary = false;
      }
      postNecessaryFieldBatchDTO(item)
        .then((res) => {})
        .catch((err) => {
          console.log("debug log --> ", err);
          this.getData();
        });
    },
    edit(item, tempCode) {
      this.currentItem = item;
      this.status = 0;
      this.editvisible = true;
      this.code = tempCode;
      this.$confirm({
        title: "修改确认",
        content: "字段的修改将同步到所有用工单位的花名册及模板",
        onOk: () => {
          putAdditionalFieldsUpdateDTO(item)
            .then((res) => {
              this.form.fieldType = item.fieldType;
              this.form.fieldName = item.fieldName;
              this.form.isNecessary = item.isNecessary;
              this.form.isOpen = item.isOpen;
              this.form.description = item.description;
              this.editvisible = false;
              this.getData();
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
    remoteControlAdd(item, tag) {
      if (item.isNecessary && tag === "isNecessary") {
        item.isOpen = true;
      } else if (!item.isOpen && tag === "isOpen") {
        item.isNecessary = false;
      }
      const req = tag === "isOpen" ? putAdditionalFieldsOpen : putAdditionalFieldsNecessary;
      req({
        ...item,
        companyAdditionalFieldsId: item.id
      }).catch((err) => {
        console.log(err);
      });
    },
    handleChange(value) {
      if (value === "1") {
        this.show = 0;
      }
      if (value === "3") {
        this.show = 1;
      }
      if (value === "4") {
        this.show = 2;
      }
      if (value === "2") {
        this.show = 3;
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      // this.$refs[formName || "ruleForm"].resetFields();
    },
    removeDomain(item) {
      const index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: "",
        key: Date.now()
      });
    },
    showModal(tag) {
      this.form = {};
      this[tag] = true;
      this.status = 1;
    },
    handleEditOk(code) {
      this.editvisible = false;
      let str = "";
      this.dynamicValidateForm.domains.forEach((item, index) => {
        str += item.value;
        if (index !== this.dynamicValidateForm.domains.length - 1) {
          str += ",";
        }
      });
      const data = {
        ID: this.currentItem.id,
        companyId: this.companyId,
        fieldType: 3,
        fieldName: this.form.fieldName,
        moduleCode: code,
        options: str,
        description: this.form.description
      };
      if (data.fieldName === "undefined") {
        this.$notification["error"]({
          message: "error",
          description: "字段名称不能为空，修改失败"
        });
        return;
      }
      if (data.fieldName === false) {
        this.$notification["error"]({
          message: "error",
          description: "字段名称不能为空，修改失败"
        });
        return;
      }
      if (this.isNull(data.fieldName) === true) {
        this.$notification["error"]({
          message: "error",
          description: "字段名称不能为空，修改失败"
        });
        return;
      }
      this.$confirm({
        title: "修改确认",
        content: "字段的修改将同步到所有用工单位的花名册及模板",
        onOk: () => {
          putAdditionalFieldsUpdateDTO(data)
            .then((res) => {
              this.$notification["success"]({
                message: "success",
                description: "修改成功"
              });
              this.getData();
            })
            .catch((err) => {
              console.log(err);
            });
        },
        onCancel: () => {
          this.getData();
        }
      });
    },
    handleAddOk(item, code) {
      this.visible1 = false;
      this.visible2 = false;
      this.visible3 = false;
      let str = "";
      this.dynamicValidateForm.domains.forEach((item, index) => {
        str += item.value;
        if (index !== this.dynamicValidateForm.domains.length - 1) {
          str += ",";
        }
      });

      const data = {
        id: this.form.id,
        companyId: this.companyId,
        fieldName: this.form.fieldName,
        fieldType: 3,
        moduleCode: code,
        options: str,
        description: this.form.description
      };

      if (data.fieldName) {
        if (data.fieldName === "undefined" || data.fieldName === false || this.isNull(data.fieldName) === true) {
          this.$notification["error"]({
            message: "error",
            description: "字段名称不能为空，添加失败"
          });
        } else {
          this.$refs.form.validate((valid) => {
            if (valid) {
              postAdditionalFieldsAddDTO(data).then((res) => {
                this.$notification["success"]({
                  message: "success",
                  description: "添加成功"
                });
                this.getData();
              });
            }
          });
        }
      } else if (!data.fieldName) {
        this.$notification["error"]({
          message: "error",
          description: "字段名称不能为空，添加失败"
        });
      }
    },
    getData(res) {
      getNecessaryFields({ companyId: this.companyId }).then((res) => {
        this.allData = res.data;
      });
    },
    goback() {
      this.$router.push({ path: "/staff/edit" });
    },
    isNull(str) {
      if (str === "") return true;
      var regu = "^[ ]+$";
      var re = new RegExp(regu);
      return re.test(str);
    }
  }
};
</script>

<style lang="scss">
.left2 {
  z-index: 3;
  left: 45px;
  position: absolute;
  color: #595959;
  font-size: 16px;
  // margin-top: -3px;
}
.ant-form {
  margin-left: 5px;
}
.table-header {
  display: flex;
  flex-direction: row;
  flex: 1;
}
.table-header-row1 {
  background: #fafafa;
}
.table-header-row,
.table-header-row1 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex: 1;
  border: #d8d8d8 1px solid;
  border-top: none;
  border-left: none;
  p {
    width: 153px;
    margin: 13px 0;
  }
}
.table-header-row2 {
  display: flex;
  justify-content: space-around;
  border: #d8d8d8 1px solid;
  border-top: none;
  border-left: none;
  p {
    float: left;
    width: 153px;
    margin: 13px 0;
  }
  .checkbox2 {
    width: 153px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item-delete {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }
}
.add-field-add {
  border: none;
}
.add-field {
  border: none;
}
.add-field-icon {
  color: var(--primary);
  font-size: 18px;
}
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #777;
}
.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.page-box-employer-setting {
  .ant-collapse > .ant-collapse-item > .ant-collapse-header {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 0px 0px rgba(215, 215, 215, 1);
    font-size: 18px;
    font-weight: 600;
    color: rgba(37, 37, 37, 1);
    line-height: 22px;
  }
  .p24 {
    background: #fff;
  }
  .ant-table-thead > tr > th {
    background: #fafafa;
  }
  .ant-collapse .ant-collapse-item .ant-collapse-header .anticon {
    left: initial;
    right: 16px;
  }
  .ant-layout {
    background: #fff;
  }

  .ant-collapse-content {
    padding-bottom: 24px;
  }
  .ant-collapse-item {
    font-size: 16px;
    color: #252525;
  }
}
</style>
